#include("/template/common/layout/_page_layout.html")
#@layout()

#define css()
<link rel="stylesheet" href="#(RESOURCE_HOST)/static/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
     .pdf-container {
        width:98%;
        padding: 3em;
    }
    html, body {
        height: 97%;
    }

    ul {
        padding: 0px 10px;
    }
</style>
#end

#define js()
<script type="text/javascript" src="#(RESOURCE_HOST)/static/js/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    function addDiyDom(treeId, treeNode) {
		var spaceWidth = 5;
		var switchObj = $("#" + treeNode.tId + "_switch"),
		icoObj = $("#" + treeNode.tId + "_ico");
		switchObj.remove();
		icoObj.before(switchObj);

		if (treeNode.level > 1) {
			var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
			switchObj.before(spaceStr);
		}
		var spantxt=$("#" + treeNode.tId + "_span").html();
		if(spantxt.length>12){
			spantxt=spantxt.substring(0,12)+"...";
			$("#" + treeNode.tId + "_span").html(spantxt);
		}
	}

    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onClick: zTreeOnClick
        },
        view: {
            showTitle: true,
            addDiyDom: addDiyDom
        }
    };

    function loadRecData(fileId){
        layui.use('layer', function () {
            var $ = layui.jquery;
            var ul;

            /**
             * 获取列表的数据，参考information edit.html
             */
            $.get("#(ctxPath)/app/ass_review/recData", {projectId:"#(projectId)",fileId:fileId}, function (res) {
                var data = res.list;
                $("ul#recomment").find("div").remove();
                $("ul#recomment").find("li").remove();
                if(data&&0 !=data.length){
                    var liTagS = '<li class="layui-timeline-item">';
                    var timeLineIcon = '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>';
                    var timeLineContentDivS = '<div class="layui-timeline-content layui-text">';
                    var timeTxtTagS = '<h3 class="layui-timeline-title">';
                    var timeTxtTagE = '</h3>';
                    var reTitle = '：';
                    var timeLineContentDivE = '</div>';
                    var liTagE = '</li>';
                    var liItem = '';
                    data.forEach(function (ele) {
                        liItem = '';
                        liItem += liTagS;
                        liItem += timeLineIcon;
                        liItem += timeLineContentDivS;
                        liItem += timeTxtTagS;
                        liItem += ele.createTime;
                        liItem += timeTxtTagE;
                        liItem += ele.remark;
                        liItem += reTitle;
                        liItem += ele.recomment;
                        /*liItem += '<hr class="layui-bg-gray">';
                        liItem += '意见反馈：';
                        if (ele.feedback) {
                            liItem += ele.feedback;
                        } else {
                            liItem += '暂无';
                        }*/
                        liItem += timeLineContentDivE;
                        liItem += liTagE;
                        $("ul#recomment").append(liItem);
                    });
                } else {
                    $("ul#recomment").append("<li><div>暂无评审意见</div></li>");
                }});
        });
    }

    function zTreeOnClick(event, treeId, treeNode) {
        $("#pdf-viewer").children().remove();
        $("#pdf-viewer").append("<a class='media' href=''></a>");
        $("a.media").media({
            width: 800
            , height: 600
            , autoplay:true
            , src:treeNode.title
        });
        layui.use('flow', function () {
            var $ = layui.jquery;
            var flow = layui.flow;
            flow.load({
                elem: '#recomment'
                , done: function (page, next) {
                    loadRecData(treeNode.fileId);
                }
            });
        });
    }

    function zTreeReload() {
        util.sendAjax({
            url: '#(ctxPath)/app/ass_review/fileTree',
            data:{projectId:"#(projectId)"},
            notice: false,
            success: function (data) {
                $.fn.zTree.init($("#tree"), setting, data.data);
            }
        });
    }

    $(document).ready(function () {
        zTreeReload();
    });
</script>
#end

#define content()
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md3">
            <ul id="tree" class="ztree"></ul>
        </div>
        <div id="pdf-viewer" class="layui-col-md6">
            <a class="media" href=""></a>
        </div>
        <div class="layui-col-md3">
            <ul id="recomment"></ul>
        </div>
    </div>
</div>
#end